<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import ClientHeader from './modules/client-header.vue';
import ClientContent from './modules/client-content.vue';
import ClientFooter from './modules/client-footer.vue';

const appStore = useAppStore();

const contentCls = computed(() => {
  const paddingLeft = appStore.isMobile ? '0px' : '16px';
  return [
    'client-content h-full overflow-hidden',
    `pl-${paddingLeft}`
  ];
});

// 简化显示footer的逻辑，总是显示
const showClientFooter = computed(() => true);
</script>

<template>
  <div class="client-layout h-full flex-col">
    <ClientHeader />
    <main :class="contentCls">
      <ClientContent />
    </main>
    <ClientFooter v-if="showClientFooter" />
  </div>
</template>

<style scoped>
.client-content {
  height: calc(100% - 56px);
}

.client-content:has(+ .client-footer) {
  height: calc(100% - 56px - 48px);
}
</style>